Ejercicios HTML

HTML es un lenguaje de etiquetado, basado en el metalenguaje SGML. Como cualquier otro lenguaje formal, HTML está definido por una gramática en los niveles de:

• Sintaxis: reglas de buena formación: <etiqueta>... </etiqueta> ; <etiqueta atributo:"valor">; etc.
• Léxico: conjunto de símbolos: head, body, div, hn, p, ol, address, etc.
• Semántica: interpretación de las construcciones (navegadores, procesadores)

Los navegadores son muy tolerantes, admiten casi cualquier cosa. Es lógico, ya que su objetivo es facilitar a toda costa el acceso a cualquier tipo de material. Esto no debería servir de excusa para no escribir HTML correcto. Por eso es conveniente usar editores que validen la corrección formal de los documentos, como sucede con HoTMetaL. Otro editor muy popular, el favorito de los diseñadores gráficos, es DreamWeawer. En cualquier caso, una opción válida y favorita de muchos es usar cualquier editor de textos simple, que no introduzca códigos de maquetación. Justamente por este motivo, MSWord no es recomendable.

Primeros pasos

[ Recomendaciones, Texto e hipertexto, Ejemplos ]

• Práctica 1: Ejercicios básicos
  • nueva sesión navegador (CTR-N),
  • conmutación entre tareas (ALT-TAB),
  • selección de bloques mediante ratón o teclado (MAY-cursor),
  • copiar (CTR-C) y pegar (CTR-V) bloques (también mediante menú o botón derecho ratón),
  • guardar ("bajar") archivo de red,
  • cambio de extensión (diferencias entre *.txt, *.htm),
  • edición de archivo ejem1.htm (adaptación de una página personal simple)
  • conmutación entre editor (Bloc de notas) y navegador (IE).

• Práctica 2: Los enlaces
  • ejem2.htm

• Práctica 3: Listas anidadas
  • edición de listas anidadas: ejem3.htm
  • desdoblamiento de listas, creación de lista de índices

• Práctica 4: Secciones, atributos
  • creación de secciones (h2, h3)
  • edición de archivo ejem4.htm
  • creación de carpetas: raíz(gifs,docs)
  • etiquetas y atributos <ol type="i">
  • editores: Bloc de notas, HoTMetaL, Dreamweaver, FrontPage

• Práctica 5: Tipos de enlaces
  • edición de archivo ejem5.htm
  • incorporación de imágenes:
    <img src="../gifs/world.gif">
  • enlaces: tipos de enlaces

• Práctica 6: Cuestiones de estilo (opcional).
  • Edición con HoTMetaL (de SoftQuad)
  • las hojas de estilo (CSS). Manual de Daniel M. Germán
  • etiqueta LINK dentro de HEAD: <link href="ejem.css" REL="stylesheet" type="text/css">
  • archivo de muestra, ejem6.htm (el estilo se particulariza en cada elemento mediante la etiqueta "class")
  • ejemplo de hoja de estilo: ejem.css
  • Muestra de hojas de estilo en XML
• index.html: con este nombre se identificará el archivo principal

Enlaces hipertextuales

• Enlaces externos
  • absolutos
  • relativos
• Enlaces internos

• Externo, a otro archivo: ejem5.htm, <A HREF="ejem5.htm">
  • Absoluto, con la dirección completa (URL) del archivo en internet: http://www.eside.deusto.es/servicios/cefe,
    <A HREF=" http://www.eside.deusto.es/servicios/cefe">
    con el camino completo de la ubicación del archivo en la unidad de disco: file:///A:/ejem5.htm, <A HREF="file:///A:/ejem5.htm">
    
  • Relativo, no se indica el camino (path) completo, solo la parte del camino que diferencia un archivo de otro, es decir, la parte del camino no compartida por el archivo que contiene el enlace y el archivo con el que se enlaza: ../../index0.html, <A HREF="../../index0.htm">
    desde un archivo a otro archivo en otra carpeta:
    <A HREF="htxt/ejem5.htm">
    relativo + interno: desde un archivo a una sección de otro archivo:
    <A HREF="4alopez.htm#inicio">
• Interno, a una sección de un mismo archivo: #inicio, <A HREF="#inicio">
  • absoluto + interno:
    <A HREF="http://sirio.deusto.es/abaitua/konzeptu/patrimon.htm#eval">

Cuestiones de estilo

• Tim Berners-Lee, inventor de HTML.
• James "Eric" Tilton, autor de Composing Good HTML.
• Jakob Nielsen , influyente consultor para WWW.

Referencia básica

J.L. Raya, J. A. Moreno, A. López. 1998. HTML 4. Guía de referencia y tutorial. Editorial RA-MA. Madrid.

Otro material de referencia en Internet